<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NFlex,
  NSelect,
  NTreeSelect,
  useMessage,
  NButton,
  NUpload,
  NImage,
  NSwitch,
  NAvatar
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import { getToken } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
import { useRoute } from 'vue-router'
import { TRUE } from 'sass'
import { router } from '@/router'
const route = useRoute()

import * as ydui from '@/assets/js/ydui.citys'
import { useTagsStore } from '@/store'
const tagsStore = useTagsStore()
let yduiCtiys = YDUI_CITYS
let addressArr = reactive({ options: [] })
let addrs = []
yduiCtiys.forEach((province, pid) => {
  let p = {}
  p.label = province.n
  p.id = province.n
  // p.children = province.c;
  addrs.push(p)

  addrs[pid].children = []
  province.c.forEach((city, cid) => {
    let c = {}
    c.label = city.n
    c.id = `${province.n} ${city.n}`
    addrs[pid].children.push(c)

    c.children = []

    city.a.forEach((area, aid) => {
      let a = {}
      a.label = area
      a.id = `${province.n} ${city.n} ${area}`
      c.children.push(a)
    })
  })
})
addressArr.options = addrs

defineOptions({ name: '商品模版编辑' })

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE

const {
  modalVisible,
  modalTitle,
  modalLoading,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
  handleSave,
} = useCRUD({
  name: '运费模版',
  initForm: {},
  doCreate: api.creategoodsGood,
  doUpdate: api.updategoodsGood,
  doDelete: api.deletegoodsGood,
  refresh: () => $table.value?.handlerefresh(),
})

const data = reactive({
  sevendayOption: [
    {
      id: 0,
      name: '是',
    },
    {
      id: 1,
      name: '否',
    },
  ],
  goodsType: [],
  uploadAction: base_path + 'api/goods/goods/file',
  token: getToken(),
  row: [],
  brandData: [],
  brandOption: [],
  growData: [],
  expressData: [],
  levelData: [],
  onLevelData: [],
  infor_ggData: [],
  infor_msData: [],
  fileList:[],
  contact_goods_options:[],
  coupons_type:[]
})

const onCreate = () => {
  return {
    attr_name: '',
    attr_value: [],
  }
}
const onCreate_after = () => {
  return {
    attr_name: '',
    attr_value: [],
  }
}
const onCreate_gg = () => {
  return {
    sku_name: '',
    sku_cover: [],
    sku_kc: '',
    sku_level:[],
    can_do:'1'
  }
}
function on_save() {
  if(!modalForm.value.cover){
    message.error("请上传商品封面"+modalForm.value.cover)
    return
  }
  if(!modalForm.value.banners){
    message.error("请上传轮播图至少一张")
    return
  }
  if(!modalForm.value.contents){
    message.error("请上传商品详情至少一张")
    return
  }
  if(!modalForm.value.sku){
    message.error("请上传商品一个规格")
    return
  }

  handleSave()
}

async function get_data(id) {
  let ret = await api.detailgoodsGood({ data_id: id })
  data.row = ret.data
//   data.row.cover
  
  handleEdit(data.row)
  if(!data.row.tags){
    modalForm.value.tags = []
  }

  data.fileList.value=[{
    id:1,
    name:'封面', 
    url:data.row.cover,
    status:"finished"
  }]
}
function on_list() {
  tagsStore.removeTag(route.fullPath)
  router.push('/goods/good')
}

onMounted(() => {
  const id = route.query.id
  modalVisible.value = true
  if (id > 0) {
    get_data(id)
  } else {
    handleAdd()
  }
  $table.value?.handleSearch()
  api.getgoodsBrand().then((res) => (data.brandData.value = res.data))
  api.getgoodsCategoryTree().then((res) => (data.brandOption.value = res.data))
  api.getGrow().then((res) => (data.growData.value = res.data))
  api.getgoodsExpress().then((res) => (data.expressData.value = res.data))
  api.getLever().then((res) => (data.levelData.value = res.data))
  api.getallgoods().then((res) => (data.contact_goods_options = res.data))
  api.getCouponsRuleList().then((res) => (data.coupons_type = res.data))
  api.getgoodsType().then((res) => (data.goodsType = res.data))
})

watch(modalVisible, (newValue, oldValue) => {
  if (!modalVisible.value) {
    tagsStore.removeTag(route.fullPath)
    router.push('/goods/good')
  }
})
//获取上级部门id
async function onleves(query) {
  let val = await api.getLeves({ key: query })
  data.onLevelData = val.data
}
//异步下拉获取上级
const loadingRef = ref(false)
const optionsRef = ref([])
const handleLeves = (query) => {
  if (!query.length) {
    optionsRef.value = []
    return
  }
  onleves(query)
  loadingRef.value = true
  // data.selectValue
  window.setTimeout(() => {
    data.onLevelData.value = data.onLevelData.filter((item) => ~item.label.indexOf(query))
    loadingRef.value = false
  }, 1e3)
}
//图文信息
const message = useMessage()
const customRequestMethod1 = (options) => {
  console.log(options, 'options')

  const { file } = options.file
  const formData = new FormData()
  formData.append('file', file)
  fetch(data.uploadAction, {
    method: 'POST',
    headers: options.headers,
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data, 'datatat')
      if (data.code === 200) {
        modalForm.value.cover = data.data.url
        message.success('封面图上传成功')
        options.onProgress(data)
      } else {
        message.error(data.msg)
      }
    })
}
const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}
//选择属性
const handleUpdateValue = (value) => {
  if (!value) {
    return
  }
  modalForm.value.info_goods = []
  modalForm.value.info_after = []
  api.getgoodsGood_attr({ data_id: value }).then((res) => {
    data.infor_ggData = res.data.gg_data
    data.infor_msData = res.data.ms_data
    data.infor_msData.forEach((item) => {
      let tags = item.tags
      tags.forEach((items) => {
        modalForm.value.info_goods.push({
          attr_name: items,
          attr_value: [],
        })
      })
    })
    data.infor_ggData.forEach((item) => {
      let tags = item.tags
      tags.forEach((items) => {
        modalForm.value.info_after.push({
          attr_name: items,
          attr_value: [],
        })
      })
    })
  })
}
//格式化关联商品选中
const renderLabel = function({ option }) {
      return h(
        "div",
        {
          style: {
            display: "flex",
            margin: "6px 0"
          }
        },
        {
          default: () => [
            h(NAvatar, {
              round: true,
              src: option.cover,
              size: "small",
              fallbackSrc: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            }),
            h(
              "div",
              {
                style: {
                  display: "flex",
                  marginLeft: "6px",
                  alignSelf: "center"
                }
              },
              { default: () => option.label }
            )
          ]
        }
      );
    };

const validate = {
  brand_id: [
    {
      required: true,
      message: '请输入品牌',
      trigger: ['input', 'blur'],
      type: 'number',
    },
  ],
  type: [
    {
      required: true,
      message: '请输入商品类型',
      trigger: ['input', 'blur'],
      type: 'number',
    },
  ],
  category_id: [
    {
      required: true,
      message: '请输入类目',
      trigger: ['blur', 'change'],
      type: 'number',
    },
  ],
  name: [
    {
      required: true,
      message: '请输入商品标题',
      trigger: ['blur', 'change'],
    },
  ],
}


</script>

<template>
  <!-- 业务页面 -->
  <CommonPage show-footer title="编辑商品信息">
    <NForm
      ref="modalFormRef"
      label-placement="left"
      label-align="left"
      :label-width="150"
      :model="modalForm"
      size="large"
      :rules="validate"
    >
      <n-card content-style="padding: 0;">
        <n-tabs type="line" animated size="large" :tabs-padding="20" pane-style="padding: 20px;">
          <n-tab-pane name="基础信息">
            <NFormItem label="品牌" path="brand_id">
              <NSelect
                style="width: 200px"
                v-model:value="modalForm.brand_id"
                label-field="name"
                value-field="id"
                :options="data.brandData.value"
                placeholder="请选择品牌"
              />
            </NFormItem>
            <NFormItem label="商品类型" path="type">
              <NSelect
                style="width: 200px"
                v-model:value="modalForm.type"
                label-field="name"
                value-field="id"
                :options="data.goodsType"
                placeholder="商品类型"
              />
            </NFormItem>
            <NFormItem label="是否划扣类商品" path="is_buckling">
              <n-radio-group
                v-model:value="modalForm.is_buckling"
                name="radiogroup"
                :default-value="0"
              >
                <n-space>
                  <n-radio  key=0 :value=0>
                    否
                  </n-radio>
                  <n-radio  key=1  :value=1>
                    是
                  </n-radio>
                </n-space>
              </n-radio-group>
            </NFormItem>
            <NFormItem label="类目" path="category_id">
              <NTreeSelect
                style="width: 200px"
                v-model:value="modalForm.category_id"
                :options="data.brandOption.value"
                key-field="id"
                label-field="name"
                placeholder="请选择父级商品分类"
                clearable
                default-expand-all
                @update:value="handleUpdateValue"
              ></NTreeSelect>
            </NFormItem>
            <NFormItem label="商品标题" path="name" style="width: 100%">
              <NInput v-model:value="modalForm.name" clearable placeholder="请输入商品标题" />
            </NFormItem>
            <NFormItem label="副标题" path="name_small`" style="width: 100%">
              <NInput v-model:value="modalForm.name_small" clearable placeholder="请输入副标题" />
            </NFormItem>
            <NFormItem label="商品排序" path="order" style="width: 100%">
              <NInputNumber  v-model:value="modalForm.order" clearable placeholder="请输入商品排序"  :default-value="0"/>
            </NFormItem>
            <NFormItem label="商品标签" path="tags" style="width: 100%">
              <n-dynamic-tags type="primary" v-model:value="modalForm.tags"   />
            </NFormItem>

          </n-tab-pane>
          <n-tab-pane name="图文信息">
            <NFormItem label="封面图" path="cover" style="width: 100%">
              <NUpload
                :action="data.uploadAction"
                :headers="{ token: data.token }"
                :max="1"
                :custom-request="customRequestMethod1"
                list-type="image-card"
                 v-model:file-list="data.fileList.value"
                :show-file-list="true"
              >
              </NUpload>
            </NFormItem>
            <NFormItem label="轮播图" path="banners" style="width: 100%">
              <NUpload
                :action="data.uploadAction"
                :headers="{ token: data.token }"
                multiple
                list-type="image-card"
                @finish="handleFinish"
                v-model:file-list="modalForm.banners"
              >
              </NUpload>
            </NFormItem>
            <NFormItem label="详情图" path="contents" style="width: 100%">
              <NUpload
                :action="data.uploadAction"
                :headers="{ token: data.token }"
                multiple
                list-type="image-card"
                @finish="handleFinish"
                v-model:file-list="modalForm.contents"
              >
              </NUpload>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="商品规格">
            <NFormItem label="SKU列表" path="sku">
              <n-layout>
                <n-layout-header>
                  <n-flex>
                    <n-tag size="large" style="width: 200px"> 规格 </n-tag>
                    <n-tag size="large" style="width: 40px"> 封面 </n-tag>
                    <n-tag size="large" style="width: 120px" v-for="item in data.levelData.value"> {{item.name}}价格 </n-tag>
                    <n-tag size="large" style="width: 100px"> 库存 </n-tag>
                    <n-tag size="large" style="width: 120px" v-if="modalForm.is_buckling===1"> 疗程次数 </n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.sku" :on-create="onCreate_gg">
                    <template #default="{ value }">
                      <n-flex justify="space-between">
                        <n-input
                          button-placement="both"
                          v-model:value="value.sku_name"
                          style="width: 200px"
                        />
                        <n-upload
                          :max="1"
                          style="width: 40px;"
                          class="cover"
                          :action="data.uploadAction"
                          :headers="{ token: data.token }"
                          list-type="image-card"
                          @finish="handleFinish"
                          v-model:file-list="value.sku_cover"
                          :show-preview-button = "false"
                        ></n-upload>

                        <n-input-number v-for="(item,index) in data.levelData.value" :key="index" :show-button="false"
                          v-model:value="value.sku_level[item.id]"
                          style="width: 120px"
                        >
                          <template #prefix> ￥ </template>
                        </n-input-number>

                        <n-input-number :show-button="false"
                          v-model:value="value.sku_kc"
                          style="width: 100px"
                        />

                        <n-input-number :show-button="false"
                          v-model:value="value.can_do"
                          style="width: 120px"
                                        v-if="modalForm.is_buckling===1"
                        />

                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="商品属性">
            <NFormItem label="商品属性" path="info_goods">
              <n-layout>
                <n-layout-header>
                  <n-flex>
                    <n-tag size="large" style="width: 100px"> 属性名 </n-tag>
                    <n-tag size="large" style="width: 200px"> 属性值 </n-tag>
                    <n-tag size="large" style="width: 200px"> 加价/与属性对应,只输入数字</n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.info_goods" :on-create="onCreate">
                    <template #default="{ value }">
                      <n-flex justify="space-between">
                        <n-input
                          button-placement="both"
                          v-model:value="value.attr_name"
                          style="width: 100px"
                        />
<!--                        <n-input-->
<!--                          button-placement="both"-->
<!--                          v-model:value="value.attr_value"-->
<!--                          style="width: 200px"-->
<!--                        />-->
                        <n-dynamic-tags size="large" button-placement="both" type="primary" style="width: 200px" v-model:value="value.attr_value"   />
                        <n-dynamic-tags size="large" button-placement="both" type="primary" style="width: 200px" v-model:value="value.attr_price"   />
                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
            <NFormItem label="发货/其他属性" path="info_after">
              <n-layout>
                <n-layout-header>
                  <n-flex>
                    <n-tag size="large" style="width: 100px"> 属性名 </n-tag>
                    <n-tag size="large" style="width: 400px"> 属性值 </n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.info_after" :on-create="onCreate_after">
                    <template #default="{ value }">
                      <n-flex justify="space-between">
                        <n-input
                          button-placement="both"
                          v-model:value="value.attr_name"
                          style="width: 100px"
                        />
<!--                        <n-input-->
<!--                          button-placement="both"-->
<!--                          v-model:value="value.attr_value"-->
<!--                          style="width: 200px"-->
<!--                        />-->
                        <n-dynamic-tags size="large" button-placement="both" type="primary" style="width: 400px" v-model:value="value.attr_value"   />
                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="营销权益">
            <NFormItem label="佣金模板" path="grow_id">
              <NSelect
                style="width: 200px"
                v-model:value="modalForm.grow_id"
                label-field="name"
                value-field="id"
                :options="data.growData.value"
                placeholder="请选择佣金培育模板"
                clearable
              />
            </NFormItem>
            <NFormItem label="获得储值金" path="get_deposit">
            <n-input-number
                  style="width: 150px"
                  v-model:value="modalForm.get_deposit"
                  clearable
                />
              &nbsp;&nbsp;~&nbsp;&nbsp;
              <n-input-number
                  style="width: 150px"
                  v-model:value="modalForm.get_deposit_max"
                  clearable
                />
              &nbsp;&nbsp;如果是固定,填写相同即可
              </NFormItem>
            <NFormItem label="获得积分" path="get_integral">
            <n-input-number
                  style="width: 150px"
                  v-model:value="modalForm.get_integral"
                  clearable
                />
              </NFormItem>
            <NFormItem label="获得成长积分" path="get_level_integral">
            <n-input-number
                  style="width: 150px"
                  v-model:value="modalForm.get_level_integral"
                  clearable
                />
              </NFormItem>
            <NFormItem label="获得优惠券" path="get_coupons">
            <NSelect
                  style="width: 500px"
                  v-model:value="modalForm.get_coupons"
                  :options="data.coupons_type"
                  placeholder="请选择优惠券"
                  clearable
                />
              </NFormItem>
<!--            <NFormItem label="升级礼包" path="is level">-->
<!--              <n-space align="center">-->
<!--                <NSwitch-->
<!--                  v-model:value="modalForm.is_level"-->
<!--                  :checked-value="1"-->
<!--                  :unchecked-value="0"-->
<!--                  :default-value="0"-->
<!--                ><template #checked>开启</template><template #unchecked>关闭</template>-->
<!--                </NSwitch>-->
<!--                <NSelect-->
<!--                  v-if="modalForm.is_level === 1"-->
<!--                  style="width: 200px"-->
<!--                  v-model:value="modalForm.is_level_type"-->
<!--                  label-field="name"-->
<!--                  value-field="id"-->
<!--                  :options="data.levelData.value"-->
<!--                  placeholder="请选择升级礼包"-->
<!--                />-->
<!--              </n-space>-->
<!--            </NFormItem>-->
          </n-tab-pane>
          <n-tab-pane name="物流及其他销售设置">
            <NFormItem label="运费模板" path="express_id">
              <NSelect
                style="width: 200px"
                v-model:value="modalForm.express_id"
                label-field="name"
                value-field="id"
                :options="data.expressData.value"
                placeholder="请选择运费模板"
              />
            </NFormItem>

            <NFormItem label="是否预热商品" path="is_hot">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_hot"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-date-picker
                  v-if="modalForm.is_hot === 1"
                  style="width: 200px"
                  type="datetime"
                  v-model:formatted-value="modalForm.is_hot_date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="开售时间"
                />
              </n-space>
            </NFormItem>

            <NFormItem label="是否定时上架" path="is_on">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_on"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-date-picker
                  v-if="modalForm.is_on === 1"
                  style="width: 200px"
                  type="datetime"
                  v-model:formatted-value="modalForm.is_on_date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="定时上架时间"
                />
              </n-space>
            </NFormItem>

            <NFormItem label="是否定时下架" path="is_off">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_off"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-date-picker
                  v-if="modalForm.is_off === 1"
                  style="width: 200px"
                  type="datetime"
                  v-model:formatted-value="modalForm.is_off_date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="定时下架时间"
                />
              </n-space>
            </NFormItem>

            <NFormItem label="限购设置" path="is_buy">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_buy"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-space align="center" v-if="modalForm.is_buy === 1">
                  <n-input-number
                    style="width: 150px"
                    v-model:value="modalForm.is_buy_days"
                    clearable
                  />天内，同一用户限购<n-input-number
                    style="width: 150px"
                    v-model:value="modalForm.is_buy_nums"
                    clearable
                  />件
                </n-space>
              </n-space>
            </NFormItem>

            <NFormItem label="最低起购设置" path="is_low">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_low"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-input-number
                  v-if="modalForm.is_low === 1"
                  style="width: 150px"
                  v-model:value="modalForm.is_low_nums"
                  clearable
                />
              </n-space>
            </NFormItem>

            <NFormItem label="限制购买等级" path="is_buy_level">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_buy_level"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <NSelect
                  v-if="modalForm.is_buy_level === 1"
                  style="width: 500px"
                  v-model:value="modalForm.is_buy_level_roles"
                  label-field="name"
                  value-field="id"
                  multiple
                  :options="data.levelData.value"
                  placeholder="请选择限制购买等级"
                />
              </n-space>
            </NFormItem>

            <NFormItem label="限制可见等级" path="is_read">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_read"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <NSelect
                  v-if="modalForm.is_read === 1"
                  style="width: 500px"
                  v-model:value="modalForm.is_read_roles"
                  label-field="name"
                  value-field="id"
                  multiple
                  :options="data.levelData.value"
                  placeholder="请选择限制可见等级"
                />
              </n-space>
            </NFormItem>

            <NFormItem label="指定用户可见可购买" path="is_select_user">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_select_user"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <NSelect
                  multiple
                  v-if="modalForm.is_select_user === 1"
                  style="width: 500px"
                  v-model:value="modalForm.is_select_user_users"
                  filterable
                  placeholder="请选择指定用户可见可购买"
                  :options="data.onLevelData"
                  :loading="loading"
                  clearable
                  remote
                  @search="handleLeves"
                />
              </n-space>
            </NFormItem>

            <NFormItem label="商品禁止分享" path="is_share">
              <n-space align="center">
                <NSwitch
                  v-model:value="modalForm.is_share"
                  :checked-value="1"
                  :unchecked-value="0"
                  :default-value="0"
                ><template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
              </n-space>
            </NFormItem>
            <NFormItem label="支持7天无理由" path="is_seven_day">
              <n-radio-group
                v-model:value="modalForm.is_seven_day"
                name="radiogroup"
                :default-value="1"
              >
                <n-space>
                  <n-radio v-for="item in data.sevendayOption" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="关联商品">
            <NFormItem label="关联商品" path="contact_goods">
               <n-transfer
                  v-model:value="modalForm.contact_goods"
                  :options="data.contact_goods_options"
                  :render-target-label="renderLabel"
                  style="width: 1200px"
                  source-filterable
                />
            </NFormItem>
          </n-tab-pane>
        </n-tabs>
      </n-card>
      <n-button :loading="loading" mt-20 type="primary" @click="on_list">返回列表</n-button>
      <n-button :loading="loading" mt-20 ml-15 type="primary" @click="on_save">保存</n-button>
    </NForm>
  </CommonPage>
</template>
